<template>
  <div>
    <p>{{ count }}</p>
    <button @click="add">点击数值+1</button>
    <button @click="sub">点击数值-1</button>
    <!-- 这种写法也是ok的调用的时候直接传参 -->
    <button @click="addArb({ a: 2 })">添加任意值</button>
    <button @click="addWait">延时增加</button>
    <button @click="getData">获取电影数量</button>
  </div>
</template>

<script>
import { mapMutations, mapState } from "vuex";
export default {
  name: "Tab",
  // 计算属性中引入数据
  computed: {
    ...mapState(["count"]),
    // count() {
    //   return this.$store.state.count;
    // },
  },
  methods: {
    // map是辅助函数
    ...mapMutations(["add", "sub", "addArb"]),
    // add() {
    //   this.$store.commit("add");
    // },
    // sub() {
    //   this.$store.commit("sub");
    // },
    // addArb() {
    //   this.$store.commit("addArb", { a: 2 });
    // },
    addWait() {
      this.$store.dispatch("addWait", { a: 3 });
    },
    getData() {
      this.$store.dispatch("getData");
    },
  },
};
</script>

<style>
</style>